<template>
    <div class="tnxel-pagination-container"
        :class="{'justify-content-center': align === 'center', 'justify-content-end': align === 'right'}">
        <el-pagination :layout="layout" :background="background"
            @size-change="sizeChange" @current-change="currentChange"
            :page-size="value.pageSize || 0" :page-sizes="pageSizeArray"
            :current-page="value.pageNo" :total="value.total || 0" v-if="value"/>
    </div>
</template>

<script>
export default {
    name: 'TnxelPaged',
    props: {
        value: Object,
        change: {
            type: Function,
            default: params => {
            },
        },
        background: {
            type: Boolean,
            default: true,
        },
        align: String,
        pageSizes: Array,
        layout: {
            type: String,
            default: 'total, sizes, prev, pager, next',
        },
    },
    computed: {
        pageSizeArray() {
            if (this.pageSizes && this.pageSizes.length) {
                return this.pageSizes;
            }
            if (this.value) {
                return [this.value.pageSize || 0];
            }
            return [];
        },
    },
    methods: {
        sizeChange(pageSize) {
            if (this.change) {
                this.change({pageSize});
            }
        },
        currentChange(pageNo) {
            if (this.change) {
                this.change({pageNo});
            }
        },
    },
}
</script>

<style>
.tnxel-pagination-container {
    display: flex;
    padding: 0.5rem 0;
}

.tnxel-pagination-container .el-pagination {
    padding: 0 0.5rem;
}
</style>
